import React, { Component } from 'react'
import '../App.css'
import axios from 'axios'
import {
    SearchOutlined,
    // DownOutlined
} from '@ant-design/icons';
import { PullRefresh } from 'react-vant';
import { Tabs, Carousel } from 'antd';
const { TabPane } = Tabs;
function callback(key) {
    console.log(key);
}
const contentStyle = {
    height: '140px',
    color: '#fff',
    lineHeight: '140px',
    textAlign: 'center',
    background: '#364d79',
};

export default class learn extends Component {
    state = {
        list: [],
        hotList: []
    }

    //下拉刷新
    onRefresh = () => {
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve(true);
            }, 1000);
        });
    };

    //数据渲染
    componentDidMount() {
        axios({
            url: '/learnList',
        }).then(res => {
            this.setState({
                list: res.data.data
            })
        })

        //热点
        axios({
            url: '/learnhotList',
        }).then(res => {
            this.setState({
                hotList: res.data.data
            })
        })
    }

    //热点数据渲染
    //  hotList=()=>{
    //     axios({
    //         url: '/learnhotList',
    //     }).then(res => {
    //         this.setState({
    //             hotlist: res.data.data
    //         })
    //     })
    // }



    //搜索数据
    check(value) {
        axios({
            url: '/learnCheck',
            method: 'post',
            data: {
                value: value
            }
        }).then(res => {
            this.setState({
                hotList: res.data.data
            })
        })
    }

    render() {
        const { list, hotList } = this.state
        return (
            <div className='popular'>
                <div className='popular_header'>
                    <div className="input">
                        <div className='icon'>
                            <SearchOutlined />
                        </div>
                        <input placeholder="输入关键字搜索科普文章" onChange={(e) => this.check(e.target.value)}></input>
                    </div>
                </div>
                <div className='popular_main'>
                    <Tabs defaultActiveKey="1" onChange={callback}>
                        <TabPane tab="热点" key="1">
                            <div className="hot">
                                <PullRefresh
                                    successText="刷新成功"
                                    headHeight={90}
                                    pullingText={({ distance }) => (
                                        <img
                                            className="doge"
                                            src="https://img.yzcdn.cn/vant/doge.png"
                                            style={{ transform: `scale(${distance / 60})` }}
                                            alt=""
                                        />
                                    )}
                                    loosingText={() => <img className="doge" src="https://img.yzcdn.cn/vant/doge.png" alt="" />}
                                    loadingText={() => <img className="doge" src="https://img.yzcdn.cn/vant/doge-fire.jpg" alt="" />}
                                    onRefresh={() => this.onRefresh}
                                >
                                    <div className='swiper_2'>
                                        <Carousel autoplay>
                                            <div>
                                                <h3 style={contentStyle}><img src="https://img0.baidu.com/it/u=4010794666,1105866046&fm=26&fmt=auto" alt=""></img></h3>
                                            </div>
                                            <div>
                                                <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=3153841751,2626550879&fm=26&fmt=auto" alt=""></img></h3>
                                            </div>
                                            <div>
                                                <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=3807908422,801930145&fm=26&fmt=auto" alt=""></img></h3>
                                            </div>
                                            <div>
                                                <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=2939374391,560439438&fm=26&fmt=auto" alt=""></img></h3>
                                            </div>
                                        </Carousel>
                                    </div>
                                    <div className='main_one'>
                                        {
                                            hotList.length && hotList.map((item, index) => {
                                                return <div key={index} className='time'>

                                                    <img src={item.img} alt=""></img>
                                                    <div>                                                        <li>{item.title}</li>
                                                        <li><span>{item.type}</span>&emsp;<span>{item.time}</span>&emsp;<span>阅读{item.num}</span>&emsp;<span>赞{item.number}</span></li>
                                                    </div>
                                                </div>

                                            })
                                        }
                                    </div>
                                </PullRefresh>
                            </div>
                            <div className='hot'>

                            </div>
                        </TabPane>
                        <TabPane tab="话题" key="2">
                            <div className='topic'>
                                <PullRefresh
                                    successText="刷新成功"
                                    headHeight={90}
                                    pullingText={({ distance }) => (
                                        <img
                                            className="doge"
                                            src="https://img.yzcdn.cn/vant/doge.png"
                                            style={{ transform: `scale(${distance / 60})` }}
                                            alt=""
                                        />
                                    )}
                                    loosingText={() => <img className="doge" src="https://img.yzcdn.cn/vant/doge.png" alt="" />}
                                    loadingText={() => <img className="doge" src="https://img.yzcdn.cn/vant/doge-fire.jpg" alt="" />}
                                    onRefresh={() => this.onRefresh}
                                >
                                    <div className='topic_one'>
                                        {
                                            list.length && list.map((item, index) => {
                                                return <div className='topic_two' key={index}>
                                                    <div className='topic_two_1'>
                                                        <img src={item.person} alt=""></img>
                                                        <div>
                                                            <li><span id="top_two">{item.name}</span>&emsp;<span className='span_1'>{item.office}</span>&emsp;<span className='span_1'>主治医师</span></li>
                                                            <li><span className='span_3'>原创</span>&emsp;<span className="span_2">{item.time}</span></li>
                                                        </div>
                                                    </div>
                                                    <div className='topic_two_2'>
                                                        <li><p>{item.topline}</p></li>
                                                        <li><p>{item.toptitle}</p></li>
                                                    </div>
                                                    <div className="topic_three_2">
                                                        <li><p>{item.types}&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;阅读{item.num} 赞{item.number}</p></li>
                                                    </div>
                                                </div>
                                            })
                                        }
                                    </div>
                                </PullRefresh>
                            </div>
                        </TabPane>
                        <TabPane tab="生活" key="3">
                            <div className='live'>
                                <PullRefresh
                                    successText="刷新成功"
                                    headHeight={90}
                                    pullingText={({ distance }) => (
                                        <img
                                            className="doge"
                                            src="https://img.yzcdn.cn/vant/doge.png"
                                            style={{ transform: `scale(${distance / 60})` }}
                                            alt=""
                                        />
                                    )}
                                    loosingText={() => <img className="doge" src="https://img.yzcdn.cn/vant/doge.png" alt="" />}
                                    loadingText={() => <img className="doge" src="https://img.yzcdn.cn/vant/doge-fire.jpg" alt="" />}
                                    onRefresh={() => this.onRefresh}
                                >
                                    <div className='swiper_1'>
                                        <Carousel autoplay className='swper_11'>
                                            <div>
                                                <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=307507940,2553598401&fm=26&fmt=auto" alt=""></img></h3>
                                            </div>
                                            <div>
                                                <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=4252242885,521694642&fm=26&fmt=auto" alt=""></img></h3>
                                            </div>
                                            <div>
                                                <h3 style={contentStyle}><img src="https://img0.baidu.com/it/u=2034926359,1578432069&fm=26&fmt=auto" alt=""></img></h3>
                                            </div>
                                            <div>
                                                <h3 style={contentStyle}><img src="https://img2.baidu.com/it/u=1418193818,4120595344&fm=253&fmt=auto&app=120&f=JPEG?w=759&h=485" alt=""></img></h3>
                                            </div>
                                        </Carousel>
                                    </div>
                                    <div className='swiper_29'>
                                        {
                                            list.length && list.map((item, index) => {
                                                return <div key={index} className='time'>

                                                    <img src={item.liveimg} alt=""></img>
                                                    <div>
                                                        <li>{item.livetitle}</li>
                                                        <li><span>{item.time}</span>&emsp;&emsp;&emsp;&emsp;&emsp;<span>阅读{item.num}</span>&ensp;<span>赞{item.number}</span></li>
                                                    </div>
                                                </div>

                                            })
                                        }
                                    </div>
                                </PullRefresh>
                            </div>
                        </TabPane>
                        <TabPane tab="睡眠" key="4">
                            <div className='sleep'>
                                <PullRefresh
                                    successText="刷新成功"
                                    headHeight={90}
                                    pullingText={({ distance }) => (
                                        <img
                                            className="doge"
                                            src="https://img.yzcdn.cn/vant/doge.png"
                                            style={{ transform: `scale(${distance / 60})` }}
                                            alt=""
                                        />
                                    )}
                                    loosingText={() => <img className="doge" src="https://img.yzcdn.cn/vant/doge.png" alt="" />}
                                    loadingText={() => <img className="doge" src="https://img.yzcdn.cn/vant/doge-fire.jpg" alt="" />}
                                    onRefresh={() => this.onRefresh}
                                >
                                    <div className='swiper_2'>
                                        <Carousel autoplay className='swper'>
                                            <div>
                                                <h3 style={contentStyle}><img src="https://img2.baidu.com/it/u=3812887605,293544107&fm=26&fmt=auto" alt=""></img></h3>
                                            </div>
                                            <div>
                                                <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=2936325996,3518721181&fm=26&fmt=auto" alt=""></img></h3>
                                            </div>
                                            <div>
                                                <h3 style={contentStyle}><img src="https://img2.baidu.com/it/u=1294124583,358965884&fm=26&fmt=auto" alt=""></img></h3>
                                            </div>
                                            <div>
                                                <h3 style={contentStyle}><img src="https://img0.baidu.com/it/u=1277093902,2973122174&fm=26&fmt=auto" alt=""></img></h3>
                                            </div>
                                        </Carousel>
                                    </div>
                                    <div className='swiper_21'>
                                        {
                                            list.length && list.map((item, index) => {
                                                return <div key={index} className='time'>

                                                    <img src={item.upimg} alt=""></img>
                                                    <div>
                                                        <li>{item.uptitle}</li>
                                                        <li><span>{item.time}</span>&emsp;&emsp;&emsp;&emsp;&emsp;<span>阅读{item.num}</span>&emsp;<span>赞{item.number}</span></li>
                                                    </div>
                                                </div>

                                            })
                                        }
                                    </div>
                                </PullRefresh>
                            </div>
                        </TabPane>
                        <TabPane tab="女性" key="5">
                            <div className='man'>
                                <PullRefresh
                                    successText="刷新成功"
                                    headHeight={90}
                                    pullingText={({ distance }) => (
                                        <img
                                            className="doge"
                                            src="https://img.yzcdn.cn/vant/doge.png"
                                            style={{ transform: `scale(${distance / 60})` }}
                                            alt=""
                                        />
                                    )}
                                    loosingText={() => <img className="doge" src="https://img.yzcdn.cn/vant/doge.png" alt="" />}
                                    loadingText={() => <img className="doge" src="https://img.yzcdn.cn/vant/doge-fire.jpg" alt="" />}
                                    onRefresh={() => this.onRefresh}
                                >
                                    <div className='swiper_2'>
                                        <Carousel autoplay className='swper'>
                                            <div>
                                                <h3 style={contentStyle}><img src="https://img2.baidu.com/it/u=4148700462,296376713&fm=26&fmt=auto" alt=""></img></h3>
                                            </div>
                                            <div>
                                                <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=1236785736,4146659311&fm=26&fmt=auto" alt=""></img></h3>
                                            </div>
                                            <div>
                                                <h3 style={contentStyle}><img src="https://img0.baidu.com/it/u=1599298995,3939525966&fm=26&fmt=auto" alt=""></img></h3>
                                            </div>
                                            <div>
                                                <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=901046618,1112334607&fm=26&fmt=auto" alt=""></img></h3>
                                            </div>
                                        </Carousel>
                                    </div>
                                    <div className='swiper_26'>
                                        {
                                            list.length && list.map((item, index) => {
                                                return <div key={index} className='time'>

                                                    <img src={item.img} alt=""></img>
                                                    <div>
                                                        <li>{item.title}</li>
                                                        <li><span>{item.time}</span>&emsp;&emsp;&emsp;&emsp;&emsp;<span>阅读{item.num}</span>&ensp;<span>赞{item.number}</span></li>
                                                    </div>
                                                </div>
                                            })
                                        }
                                    </div>
                                </PullRefresh>
                            </div>
                        </TabPane>


                    </Tabs>

                </div>
            </div>
        )
    }
}
